#oem_header {
  &.hiden {
    transform: translateY(-100%);
  }
  &.animate {
    transition: transform 0.15s ease-out;
  }
  &.is_fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

    .oem_header_top {
        background-color: var(--search-bar-bg);
        color: var(--search-bar-color);
        a {
            color: var(--search-bar-color);
        }
        .content {
            @media screen and (max-width: 767px) {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            @media screen and (min-width: 768px) {
                display: grid;
                grid-template-columns: auto auto;
                column-gap: 30px;
                .top_item:nth-child(2) {
                    grid-row-start: 1;
                    grid-row-end: 4;
                }
            }

            .search_box {
                color: var(--search-bar-color);
                form {
                    border-bottom: 1px solid #e7e7e7;
                }
                input {
                    line-height: 22px;
                    color: var(--search-bar-color);
                    font-size: var(--general_font_size);
                    &::placeholder {
                        color: var(--search-bar-color);
                    }
                }
                button {
                    svg {
                        transform: rotate(-90deg);
                        width: 14px;
                        height: 14px;
                        fill: currentColor;
                        stroke: currentColor;
                    }
                }
            }

            .header_icons {
                .cart_icon {
                    #cart_number {
                        @media screen and (min-width: 768px) {
                            height: 23px;
                            width: 23px;
                            border-radius: 50%;
                            background-color: #e7e7e7;
                        }
                        @media screen and (max-width: 767px) {
                          position: absolute;
                          right: -5px;
                          top: -10px;
                          height: 23px;
                          width: 23px;
                          border-radius: 50%;
                          background-color: var(--search-bar-color);
                          color: var(--search-bar-bg);
                        }
                    }
                }
            }
            
        }
    }
    .oem_header_menu_wrap {
        background-color: var(--nav-bg);
        position: relative;
        z-index: 999;
    }

  .nav-logo {
    a {
      font-family: var(--title_font_family);
      font-style: var(--title_font_style);
      letter-spacing: var(--title_letter_spacing);
    }

    .logo {
      font-size: 1.875rem;
      font-weight: bold;
     

      span {
        display: none;
        font-family: var(--title_font_family);
        font-style: var(--title_font_style);
        letter-spacing: var(--title_letter_spacing);
        @media screen and (min-width: 768px) {
          &.pc {
            display: flex;
            align-items: center;
          }
        }
        @media screen and (max-width: 767px) {
          &.yd {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
